<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI对话模板</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f0f2f5;
            padding: 20px;
            max-width: 800px;
            margin: 0 auto;
        }

        .chat-container {
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            overflow: hidden;
            height: calc(100vh - 40px);
            display: flex;
            flex-direction: column;
        }

        .chat-header {
            background-color: #2563eb;
            color: white;
            padding: 16px;
            text-align: center;
            font-size: 1.2rem;
            font-weight: 600;
        }

        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .message {
            max-width: 70%;
            padding: 12px 16px;
            border-radius: 18px;
            line-height: 1.5;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .user-message {
            background-color: #2563eb;
            color: white;
            align-self: flex-end;
        }

        .ai-message {
            background-color: #e5e7eb;
            color: #111827;
            align-self: flex-start;
        }

        .message-time {
            font-size: 0.75rem;
            opacity: 0.7;
            margin-top: 4px;
            text-align: right;
        }

        .chat-input {
            display: flex;
            padding: 16px;
            border-top: 1px solid #e5e7eb;
            gap: 10px;
        }

        #message-input {
            flex: 1;
            padding: 12px 16px;
            border: 1px solid #e5e7eb;
            border-radius: 24px;
            font-size: 1rem;
            outline: none;
            transition: border-color 0.2s;
        }

        #message-input:focus {
            border-color: #2563eb;
        }

        #send-button {
            background-color: #2563eb;
            color: white;
            border: none;
            border-radius: 50%;
            width: 48px;
            height: 48px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        #send-button:hover {
            background-color: #1d4ed8;
        }

        .typing-indicator {
            align-self: flex-start;
            display: flex;
            gap: 4px;
            padding: 8px 16px;
        }

        .typing-indicator span {
            width: 8px;
            height: 8px;
            background-color: #9ca3af;
            border-radius: 50%;
            animation: typing 1.4s infinite ease-in-out both;
        }

        .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
        .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }

        @keyframes typing {
            0%, 80%, 100% { transform: scale(0); }
            40% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="chat-container">
        <div class="chat-header">AI对话助手</div>
        <div class="chat-messages" id="chat-messages">
            <!-- 消息会动态添加到这里 -->
        </div>
        <div class="chat-input">
            <input type="text" id="message-input" placeholder="输入消息...">
            <button id="send-button">→</button>
        </div>
    </div>

    <script>
        // DOM元素
        const chatMessages = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');

        // 预设的AI回复
        const aiResponses = [
            "我明白了，你可以详细说说你的问题吗？",
            "这个问题很有意思，让我想想...",
            "根据我的理解，你需要的是...",
            "我可以帮你解决这个问题，不过需要你提供更多信息。",
            "好的，我来为你解答这个问题。",
            "你的想法很有道理，我完全同意。",
            "让我整理一下思路，然后给你一个详细的回复。",
            "这个问题可能需要从几个方面来考虑..."
        ];

        // 初始化欢迎消息
        function initWelcomeMessage() {
            addMessage("你好！我是AI助手，有什么可以帮助你的吗？", 'ai');
        }

        // 添加消息到聊天窗口
        function addMessage(text, sender) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${sender}-message`;
            
            // 获取当前时间
            const now = new Date();
            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
            
            messageDiv.innerHTML = `
                <div class="message-text">${text}</div>
                <div class="message-time">${timeString}</div>
            `;
            
            chatMessages.appendChild(messageDiv);
            // 滚动到底部
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 显示正在输入状态
        function showTypingIndicator() {
            const typingDiv = document.createElement('div');
            typingDiv.className = 'typing-indicator';
            typingDiv.id = 'typing-indicator';
            typingDiv.innerHTML = '<span></span><span></span><span></span>';
            chatMessages.appendChild(typingDiv);
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // 隐藏正在输入状态
        function hideTypingIndicator() {
            const typingDiv = document.getElementById('typing-indicator');
            if (typingDiv) {
                chatMessages.removeChild(typingDiv);
            }
        }

        // 发送消息
        function sendMessage() {
            const text = messageInput.value.trim();
            if (!text) return;

            // 添加用户消息
            addMessage(text, 'user');
            messageInput.value = '';

            // 显示正在输入，然后模拟AI回复
            showTypingIndicator();
            
            setTimeout(() => {
                hideTypingIndicator();
                // 随机选择一个预设回复
                const randomResponse = aiResponses[Math.floor(Math.random() * aiResponses.length)];
                addMessage(randomResponse, 'ai');
            }, 1000 + Math.random() * 1000); // 1-2秒的随机延迟，模拟思考时间
        }

        // 事件监听
        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                sendMessage();
            }
        });

        // 初始化
        initWelcomeMessage();
    </script>
</body>
</html>